<template>
    <div>
        <h1>App</h1>

        <!-- <Cart></Cart> -->
        <!-- 动态组件 -->
        <!-- tab切换 -->
        <button @click="comName = 'Home'">Home</button>
        <button @click="comName = 'Cart'">Cart</button>
        <button @click="comName = 'Shop'">Shop</button>
        <!-- 
            缓存组件数据 
        -->
        <!-- <KeepAlive  :exclude="['Home', 'Cart']"> -->
        <!-- <KeepAlive exclude="Home,cart"> -->
        <KeepAlive max="2">
            <component :is="comName"></component>
        </KeepAlive>

        <hr>

        <button @click="flag = !flag">Home/shop</button>
        <KeepAlive>
            <Home v-if="flag"></Home>
            <Shop v-else></Shop>
        </KeepAlive>
    </div>
</template>
<script>
export default {
    data() {
        return {
            flag: true,
            comName: "Home",
        }
    },
    methods: {
        log(e) {
            console.log(e);
        }
    }
}
</script>
<style>
div {
    border: solid;
    padding: 10px;
}
</style>